import React from 'react'
import { BrowserRouter as Switch, Route } from 'react-router-dom';
import { Link } from 'react-router-dom';
import './Content.css'
import Detail from './Detail';
import Home from './Home';


const Api = () => {
    return <h1>Api</h1>
}
const Login = () => {
    return <h1>Login</h1>
}


const New = (props) => {
    return (
    <div>
        <h1>新手入门</h1>
        <div>
            <Link to='/new/login' >Login</Link>
            <Link to='/new/api' >API</Link>
        </div>
        <div>
            <Switch>
                <Route path='/new/login' component={Login}/>
                <Route path='/new/api' component={Api}/>
            </Switch>
        </div>
    </div>
    )
}

const Content = () => {
    return (
        <div className='content-wrap'>
            <div className='content'>
                <div className='content-left'>
                    <Switch>
                        {/* exact为精确匹配：有/的时候，只显示Home，不显示News */}
                        <Route exact path='/' component={Home}></Route>
                        <Route path='/home' component={Home}></Route>
                        {/* <Route exact path='/'>
                            <Home />
                        </Route> */}


                        <Route path='/new' component={New}></Route>
                        <Route path='/api' component={Api} ></Route>
                        <Route path='/login' component={Login} ></Route>
                        <Route path='/detail/:id' component={Detail} ></Route>
                    </Switch>
                </div>
                <div className='content-right'>

                </div>
            </div>
        </div>
    )
}

export default Content


